<!--评价列表-单个会员-->
<template>
  <f7-page no-toolbar class="background-color: #f4f5f5;"
           infinite
           :infinite-distance="50"
           :infinite-preloader="showPreloader"
           @infinite="loadMore"
  >
    <f7-navbar title="大卫david的印象评价" back-link="Back">
    </f7-navbar>

    <f7-block-title>所有的都是匿名评价哦,左滑可参与哟！</f7-block-title>
    <f7-list media-list>
      <f7-list-item v-for="(item, index) in items" :key="index"
              swipeout
              text="是个好人，幽默帅气，有风度"
      >
        <f7-swipeout-actions right>
          <f7-swipeout-button round >不认同</f7-swipeout-button>
          <f7-swipeout-button color="blue">认同</f7-swipeout-button>
        </f7-swipeout-actions>

<!--        <f7-swipeout-actions right>
          <f7-swipeout-button confirm-text="您确定不认同吗？">不认同</f7-swipeout-button>
          <f7-swipeout-button color="blue" confirm-text="您确定认同吗？">认同</f7-swipeout-button>
        </f7-swipeout-actions>-->
      </f7-list-item>

    </f7-list>


    <f7-toolbar bottom>
      <f7-link icon-f7="heart" style="margin-left: 10%;" target="_blank" text="收藏TA" ></f7-link> <!--heart_fill-->
      <f7-link icon-f7="star_fill" style="margin-right: 10%;" target="_blank" text="关注TA" ></f7-link> <!--star_fill-->
    </f7-toolbar>

  </f7-page>
</template>

<script>
  import labelListEdit from '../../components/labelListEdit.vue';


  export default {
    components: {labelListEdit},
    data() {
      return {
        showPreloader: true,
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          // autoplay: {
          //   delay: 1500,
          // },
          direction:'vertical'
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },
      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },

      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },

    }
  }
</script>
